<template>
  <div>
    <!-- v-model暂时只能用于双向绑定表单和接受数据变量(一方改变,另一方随之更新) -->
    用户名：<input v-model="username" type="text" > <br>

    密    码：<input v-model="password" type="password" > <br>

    <!-- 下拉菜单 -->
    <!-- 下拉菜单的v-model给select添加,获取的值是option中的value -->
    来自于：<select v-model="city">
      <option  value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="wh">武汉</option>
    </select> <br>

    <!-- 多选框 -->
    <!-- 当接收多选框的变量为数组时,v-model绑定的变量接收的是多选框的value值 -->
    爱    好：<input v-model="hobby" type="checkbox" value="smoke">抽烟
          <input v-model="hobby" type="checkbox" value="drink">喝酒
          <input v-model="hobby" type="checkbox" value="hotHead">烫头  <br>
    <!-- 当接收多选框的变量为非数组时,v-model绑定的变量接收的是多选框的checked属性值 -->
    爱    好：<input v-model="isChecked1" type="checkbox" value="smoke">抽烟
          <input v-model="isChecked2" type="checkbox" value="drink">喝酒
          <input v-model="isChecked3" type="checkbox" value="hotHead">烫头  <br>

    性    别： 男<input v-model="gender" type="radio" name="gender" value="male">
              女<input v-model="gender" type="radio" name="gender" value="female">  <br>

    留    言：<textarea v-model="words" cols="30" rows="10"></textarea>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        username:'',
        password:'',
        city:'',
        hobby:[],
        isChecked1:'',
        isChecked2:'',
        isChecked3:'',
        gender:'',
        words:''
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>